<template>
  <div class="summary-statistics bg-background text-foreground p-6">
    <h2 class="text-2xl font-bold mb-6">汇总统计</h2>

    <!-- 使用 v-if 来确保数据存在才渲染 -->
    <div v-if="statisticsData">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <div v-for="(stat, index) in statisticsData" :key="index"
          class="bg-card text-card-foreground p-4 rounded-lg shadow-sm">
          <h3 class="text-lg font-semibold mb-2">{{ stat.organization }}</h3>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-sm text-muted-foreground">设备总数</p>
              <p class="text-2xl font-bold">{{ stat.totalEquipment }}</p>
            </div>
            <div>
              <p class="text-sm text-muted-foreground">在线设备</p>
              <p class="text-2xl font-bold">{{ stat.onlineEquipment }}</p>
            </div>
            <div>
              <p class="text-sm text-muted-foreground">故障设备</p>
              <p class="text-2xl font-bold">{{ stat.faultyEquipment }}</p>
            </div>
            <div>
              <p class="text-sm text-muted-foreground">在线率</p>
              <p class="text-2xl font-bold">{{ stat.onlineRate }}%</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表部分 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-card text-card-foreground p-4 rounded-lg shadow-sm">
          <h3 class="text-lg font-semibold mb-4">设备状态分布</h3>
          <canvas ref="equipmentStatusChart"></canvas>
        </div>
        <div class="bg-card text-card-foreground p-4 rounded-lg shadow-sm">
          <h3 class="text-lg font-semibold mb-4">设备类型分布</h3>
          <canvas ref="equipmentTypeChart"></canvas>
        </div>
      </div>
    </div>

    <!-- 如果数据不存在，显示加载信息 -->
    <div v-else class="text-center py-4">
      正在加载统计数据...
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Chart from 'chart.js/auto'

const statisticsData = ref(null)
const equipmentStatusChart = ref(null)
const equipmentTypeChart = ref(null)

// 模拟异步数据获取
const fetchStatisticsData = async () => {
  // 这里应该是实际的 API 调用
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          organization: '生产部门',
          totalEquipment: 100,
          onlineEquipment: 95,
          faultyEquipment: 5,
          onlineRate: 95
        },
        {
          organization: '质量控制部',
          totalEquipment: 50,
          onlineEquipment: 48,
          faultyEquipment: 2,
          onlineRate: 96
        },
        {
          organization: '研发部门',
          totalEquipment: 30,
          onlineEquipment: 29,
          faultyEquipment: 1,
          onlineRate: 97
        }
      ])
    }, 1000)
  })
}

onMounted(async () => {
  try {
    statisticsData.value = await fetchStatisticsData()
    initCharts()
  } catch (error) {
    console.error('Failed to fetch statistics data:', error)
    // 可以在这里设置一个错误状态
  }
})

const initCharts = () => {
  if (equipmentStatusChart.value && equipmentTypeChart.value) {
    new Chart(equipmentStatusChart.value, {
      type: 'pie',
      data: {
        labels: ['在线', '离线', '故障'],
        datasets: [{
          data: [172, 5, 8],
          backgroundColor: ['#10B981', '#3B82F6', '#EF4444']
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'bottom',
          },
          title: {
            display: true,
            text: '设备状态分布'
          }
        }
      }
    })

    new Chart(equipmentTypeChart.value, {
      type: 'bar',
      data: {
        labels: ['压力表', '温度计', '流量计', '液位计', '其他'],
        datasets: [{
          label: '设备数量',
          data: [65, 59, 80, 81, 56],
          backgroundColor: [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        },
        plugins: {
          legend: {
            display: false
          },
          title: {
            display: true,
            text: '设备类型分布'
          }
        }
      }
    })
  }
}
</script>

<style scoped>
/* 如果需要任何特定的样式，可以在这里添加 */
</style>
